<template>

  <div id="id">
    <top></top>
    <Navigation></Navigation>

        <br>
        <div class="cardbox">
            <div class="cardbox_mid" style="width: 92%;margin: auto;border-radius:10px; padding: 20px;background-color: #fff;margin-bottom: 100px;">
              
              <template>
                  <el-table
                    :data="tableData"
                    style="width: 100%;font-size: 13px;"
                    :row-class-name="tableRowClassName">

                    <el-table-column
                      prop="tb_number"
                      label="订单编号"
                      width="280">
                    </el-table-column>

                    <el-table-column
                      prop="tb_spname"
                      label="商品名称"
                      width="260">
                    </el-table-column>

                    <el-table-column
                    prop="tbl_order_time"
                    label="下单时间"
                    width="180"
                    >
                  </el-table-column>


                  <!-- <el-table-column
                  prop="tbl_complete_time"
                  label="完成时间"
                  width="180"
                  >
                </el-table-column> -->


                <el-table-column
                prop="tb_num"
                label="商品数量"
                width="100"
                >
              </el-table-column>


                    <el-table-column
                      prop="tbl_order_money"
                      label="商品总价"
                      width="100"
                      >
                    </el-table-column>



                    


                <el-table-column
                prop="tbl_order_status"
                label="订单状态"
                width="100"
                >
                <template slot-scope="scope">
                  <el-tag
                    :type="scope.row.tbl_order_status== 1 ? 'primary' : 'danger'"
                    disable-transitions>{{scope.row.tbl_order_status == 1 ? '已完成':'未完成'}}</el-tag>
                </template>
              </el-table-column>


                           
            <el-table-column
            prop="tbl_payment_status"
            label="支付状态"
            width="100"
            >
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.tbl_payment_status== 1 ? 'primary' : 'info'"
                disable-transitions>{{scope.row.tbl_payment_status == 1 ? '已支付':'未支付'}}</el-tag>
            </template>

          </el-table-column>
              

          
          <el-table-column label="操作"
          width="190"
          
          >
              <template slot-scope="scope">


                  <el-button
                  size="mini"
                  :type="scope.row.tbl_payment_status== 1 ? 'success' : ''"
                  @click="handleEdit(scope.$index, scope.row)">{{scope.row.tbl_payment_status == 1 ? '已支付':'去支付'}}</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row.t_id)">删除</el-button>
              </template>


            </el-table-column>



                  </el-table>
                </template>

        

      </div>

  </div>

</div>
</template>

<script>
  export default {
   methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    }
  },
    data() {
      return {
        tableData: [],
        table:[],
        num:0,
        price:0,
        fullscreenLoading: false
      }
    },


    mounted:function(){
      this.loadexecution();
  },


    methods: {

      handleEdit(index, row) {

          if(this.tableData[index].tbl_payment_status == 1)
          {
              this.utils.success("当前订单已支付成功,请勿重复支付!")
              return;
          }

        console.log(index, row);
        this.$router.push({path: '/PaymentPage',query:this.tableData[index]});
      },




      async handleDelete(index, row) {

          
      if(this.tableData[index].tbl_payment_status == 1)
      {
          this.utils.success("当前订单已支付成功,暂时无法删除!")
          return;
      }

      

      const {data:res} = await this.$http.post('person/DeteleOrder',this.$qs.stringify({id:row}));
        if(res.success==true){
          this.tableData.splice(index, 1)
          this.utils.success("删除成功!")
        }

      },


      
      async loadexecution(){ 

        const {data:res} = await this.$http.post('person/findEmail',this.$qs.stringify({email:JSON.parse(localStorage.getItem('email')),page:0,num:10}));
        if(res.success==true){
          this.tableData = res.result;
          console.log(this.tableData)
        }

      },





    }
  }
</script>

<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
